.auto-btn,
.auto-btn button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(0.8 * var(--auto-input-padding)) calc(2 * var(--auto-input-padding));
    border-radius: var(--auto-border-radius);
    font: var(--auto-font);
    text-transform: uppercase;
    cursor: pointer;
    color: var(--auto-color);
    background: var(--auto-bgcolor);
    box-shadow: var(--auto-shadow);
    border: var(--auto-border);
    box-sizing: border-box;
    vertical-align: bottom;
    gap: 0.3em;

    &:hover {
        border: var(--auto-active-border);
        background-color: var(--t-color-theme-1);
    }

    &:active {
        background: var(--t-color-theme-2);
    }

    &.x-small {
        font-size: var(--t-font-size-x-small);
        padding: calc(0.5 * var(--t-spacing-x-small)) var(--t-spacing-x-small);
    }

    &.small {
        font-size: var(--t-font-size-small);
        padding: calc(0.5 * var(--t-spacing-small)) var(--t-spacing-small);
    }

    &.medium {
        font-size: var(--t-font-size-medium);
        padding: calc(0.5* var(--t-spacing-medium)) var(--t-spacing-medium);
    }

    &.large {
        font-size: var(--t-font-size-large);
        padding: calc(0.5* var(--t-spacing-large)) var(--t-spacing-large);
    }

    &.x-large {
        font-size: var(--t-font-size-x-large);
        padding: calc(0.5* var(--t-spacing-x-large)) var(--t-spacing-x-large);
    }

    &.compact {
        padding: calc(0.3 * var(--auto-input-padding)) calc(0.5 * var(--auto-input-padding));
    }

    &.circle {
        border-radius: 50%;
        aspect-ratio: 1;
        padding: var(--auto-input-padding);
    }

    &.pill {
        border-radius: 9999px;
    }

    &.primary {
        background-color: var(--auto-primary-color);
        color: color-mix(in srgb, var(--auto-primary-color) 0%, white 100%);
        border: 1px solid var(--auto-primary-color);

        &:hover {
            background-color: var(--t-color-primary-4);
        }

        &:active {
            background-color: var(--auto-primary-color);
        }
    }

    &.success {
        background-color: var(--t-color-success-5);
        color: color-mix(in srgb, var(--t-color-success-5) 0%, white 100%);
        border: 1px solid var(--t-color-success-5);

        &:hover {
            background-color: var(--t-color-success-4);
        }

        &:active {
            background-color: var(--auto-success-color);
        }
    }

    &.warning {
        background-color: var(--t-color-warning-5);
        color: color-mix(in srgb, var(--t-color-warning-5) 0%, white 100%);
        border: 1px solid var(--t-color-warning-5);

        &:hover {
            background-color: var(--t-color-warning-4);
        }

        &:active {
            background-color: var(--auto-warning-color);
        }
    }

    &.error,
    &.danger {
        background-color: var(--t-color-danger-5);
        color: color-mix(in srgb, var(--t-color-danger-5) 0%, white 100%);
        border: 1px solid var(--t-color-danger-5);

        &:hover {
            background-color: var(--t-color-danger-4);
        }

        &:active {
            background-color: var(--auto-danger-color);
        }
    }

    &.info {
        background-color: var(--t-color-info-4);
        color: color-mix(in srgb, var(--t-color-info-4) 0%, white 100%);
        border: 1px solid var(--t-color-info-4);

        &:hover {
            background-color: var(--t-color-info-3);
        }

        &:active {
            background-color: var(--auto-info-color);
        }
    }
}